<template>
    <div id="star">
        <div class="top">
            <div class="left">
                <em>推荐</em>
                <span>上新了小米</span>
                <span>小米智能生活</span>
            </div>
            <div class="right">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-lingdang"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-denglu"></use>
                </svg>
            </div>
        </div>
        <div class="xqq">
            <p>
                <span>兴趣圈</span>
                <span>1.5万人已加入</span>
            </p>
        </div>
        <div class="nav">
            <ul class="list">
                <li v-for="(v,i) in interest">
                    <div class="pic"><img :src="v.pic" alt=""></div>
                    <h2>{{v.txt}}</h2>
                </li>
            </ul>
        </div>
        <div class="session1">
            <img src="src/assets/img/star/s1.png" alt="">
            <img src="src/assets/img/star/s2.png" alt="">
            <img src="src/assets/img/star/s3.png" alt="">
            <img src="src/assets/img/star/s4.png" alt="">
        </div>
        <div class="session2">
            <div class="block" v-for="(v,i) in block">
                <img :src="v.pic" alt="" width="80%">
                <h6>{{v.tip}}</h6>
                <p>{{v.txt}}</p>
                <div class="info">
                    <span><img src="src/assets/img/star/s210.jpg" alt="" width="24px" height="24px"></span>
                    <a>{{v.name}}</a><span><img src="src/assets/img/star/eye.png" alt="" width="14px">{{v.num}}</span>
                </div>           
            </div>
        </div>
        <div class="bottombox"></div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            interest:[],
            block:[],
        }
    },
    mounted(){
        var _this=this;
        this.$http.get('./data/star.json')
        .then(function (response){
            console.log(response);
            // console.log(this);
            _this.interest=response.data.interest;
            _this.block=response.data.block;
        })
        .catch(function(error){
            console.log(error);
        })
    }
}
</script>

<style lang="less" scoped>
    ::-webkit-scrollbar {/*隐藏滚轮*/
		display: none;
    }
    h1{
        font-size: 17px;
        font-weight: bolder;
    }
    h2{
        font-size: 13px;
        font-weight: bolder;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }   
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        font-size: 23px;
    }
    .top{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        font-size: 17px;
        font-weight: bolder;
        color: #3c3c3c;
        position: fixed;
        top:0;
        left: 0px;
        right: 0px;
        background: white;
        padding: 10px 0px;
    }
    .top .left{
        width: 70%;
        display: flex;
        justify-content: space-around;
    }
    .top .left em{
        width: 20%;
        color: chocolate;
        font-weight: bolder;
        
    }
    .top .left span{
        width: 40%;
    }
    .top .right{
        width: 30%;
        display: flex;
        justify-content: space-around;
    }
    .top .right span{
        width: 50%;
    }
    .top span{
        font-size: 17px;
    }
    .xqq{
        width: 100%;
        height: 50px;
        margin-top: 30px;
    }
    .xqq p{
        padding: 12.5px;
        font-weight: bolder;
    }
    .xqq p span:nth-of-type(1){
        float: left;
    }
    .xqq p span:nth-of-type(2){
        float: right;
    }
    .nav{
        overflow-x: scroll;
    }
    .nav .list{
        width: 830px;
        display: flex;
        flex-wrap:wrap;
        padding: 5px 0 15px;
    }
    .nav li{
        margin: 0 10px;
    }
    .nav img{
        width: 60px;
        border-radius: 50%;
        overflow: hidden;
        background: red;
    }
    .session1{
        display: flex;
        flex-wrap: wrap;
    }
    .session1 img{
        width: 25%;
        height: 25%;
    }
    .session2{
        display: flex;
        flex-wrap: wrap;
    }
    .session2 .block{
        width: 50%;
    }
    .session2 h6{
        color: gray;
        font-size: 13px;
    }
    .session2 .block .info{
        padding: 0 10px;
        color: gray;
        font-size: 13px;
    }
    .session2 .block .info span:nth-of-type(1){
        border-radius: 50%;
        overflow: hidden;
        float: left;
        margin-right: 5px;
    }
    .session2 .block .info a{
        margin-top: 5px;
        float: left;
    }
    .session2 .block .info span:nth-of-type(2){
        margin-top: 5px;
        float: right;
    }
    .bottombox{
        width: 100%;
        height: 80px;
    }
</style>
